<template>
  <u-popup
    :value="show"
    mode="center"
    border-radius="10"
    width="480rpx"
    height="316rpx"
    @close="close"
  >
    <view class="pop-box fdc flex-between u-text-center u-p-t-70 u-p-b-40">
      <view class="u-p-l-24 u-p-r-24">
        <view v-html="confirmTitle"></view>
      </view>
      <view class="flex-row">
        <view class="btn cancel-btn u-m-r-26" @click="close">{{ cancelText }}</view>
        <view class="btn confirm-btn" @click="confirm">{{ confirmText }}</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  /**
	 * 确认弹窗
	 * <confirm-alert
			:show.sync="show"
			confirmTitle="您确定要将宝贝移入收藏吗？"
			@confirm=""
			cancel-text="我再想想"
			confirm-text="确认"
     />
	 */
  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      confirmTitle: {
        type: String,
        default: '',
      },
      cancelText: {
        type: String,
        default: '取消',
      },
      confirmText: {
        type: String,
        default: '确认',
      },
    },
    data() {
      return {}
    },
    methods: {
      open() {
        this.$emit('update:show', true)
      },
      close() {
        this.$emit('update:show', false)
      },
      // 点击确认按钮
      confirm() {
        this.close()
        this.$emit('confirm')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pop-box {
    width: 480rpx;
    height: 316rpx;
  }

  .btn {
    width: 190rpx;
    height: 72rpx;
    line-height: 70rpx;
    border-radius: 36rpx;
  }

  .cancel-btn {
    background: #fff;
    border: 2rpx solid rgba(51, 51, 51, 1);
  }

  .confirm-btn {
    color: #fff;
    background: var(--color);
  }
</style>
